<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/public/static/h-ui/css/H-ui.min.css"/>
</head>
<style type="text/css">
    .error {
        padding-left: 5px !important;
    }
    .table {
        width: 100%;
        display: table;
        border-left: 1px dotted #e5e5e5;
        border-right: 1px dotted #e5e5e5;
        border-bottom: 1px dotted #e5e5e5;
        background: rgba(204, 204, 204, 0.09);
    }
    .table-body {
        min-height: 50px;
        max-height: 410px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .inline-block {
        display: inline-block;
    }
    .w5 {
        width: 5%;
    }
    .w75 {
        width: 15%;
    }
    .w19 {
        width: 10%;
        text-align: center;
    }
    .w100 {
        width: 100% !important;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px dotted #e5e5e5;
    }
    input {
        vertical-align: initial;
    }
    .table input[type="text"], input[type="password"], input.text, input.password {
        font: 12px/20px Arial;
        color: #777;
        background-color: #FFF;
        vertical-align: baseline;
        margin-bottom: 0px;
    }
    .set-style dl dt {
        text-align: left;
        width: 7%;
    }
    .attr-choose-wrap label, .relate-norm label {
        cursor: pointer;
        float: left;
        margin: 0 15px 10px 0;
        padding: 0 10px;
        color: #636363;
        line-height: 28px;
    }
    .attr-choose-wrap label.current, .relate-norm label.current {
        color: #636363;
        background: url(../images/icon_choose.gif) no-repeat right bottom;
    }
    .w140 {
        width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0;
        height: 23px;
        line-height: 26px;
    }
</style>
<body>
<article class="cl pd-20">
    <form action="" method="post" class="form form-horizontal" id="">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>属性名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" autocomplete="off" value="{$info.attr_value_name}" placeholder="属性名称" class="input-text"
                       id="attr_name">
                <p class="error">请输入属性名称</p>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品分类：</label>
            <div class="formControls col-xs-8 col-sm-9">
				<span class="select-box">
				  <select class="select" size="1" id="cate_id">
					  {volist name="res" id="v1"}
						<option value="{$v1['cate_id']}" {if condition="$info.cate_id==$v1.cate_id"} selected {/if}>{$v1['cate_name']}</option>
					  {/volist}
				  </select>
				</span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>属性排序：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" autocomplete="off" value="{$info.sort}" placeholder="属性排序" class="input-text"
                       id="sort">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">是否启用：</label>
            <div class="formControls col-xs-8 col-sm-3 skin-minimal">
                <div class="check-box">
                    <input type="checkbox" {if condition="$info.is_use eq 1" }checked="checked" {/if} id="is_visible">
                    <label for="is_visible">&nbsp;</label>
                </div>
            </div>
        </div>
        <div style="width: auto;height: auto" id="att">
            {volist name="info['exp']" id="ex"}
                <div class="row cl">
                    <div class="w100">
                        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>属性值：</label>
                        <div class="formControls col-xs-8 col-sm-9 spec_data">
                            <input style="width: 300px;" type="text" autocomplete="off" value="{$ex}" placeholder="" class="input-text" name="attr_value" id="attr_value">
                            <div class="inline-block w19"><a style="color: #00a2d4" href="javascript:;" onclick="delSpecValue(this)">删除</a></div>
                        </div>
                    </div>
                </div>
            {/volist}
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"></label>
            <div class="formControls col-xs-8 col-sm-3">
                <a href="javascript:;" onclick="addSpecValue(this)"><i class="Hui-iconfont">&#xe600;</i>添加一个属性值</a>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" onclick="addGoodsAttribute()" type="button"
                       value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
        <input type="hidden" id="attr_id" value="{$info['attr_value_id']}"/>
    </form>
</article>
<script type="text/javascript" src="/public/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="/public/static/layer/2.4/layer.js"></script>
<script type="text/javascript">
    //添加一个属性
    function addSpecValue(e){
        var html= '<div class="row cl">';
        html+= '<div class="w100">';
        html+='	<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>属性值：</label>';
        html+='<div class="formControls col-xs-8 col-sm-9 spec_data">';
        html+='<input  style="width: 300px;" type="text" autocomplete="off" value="" placeholder="" class="input-text" name="attr_value" id="attr_value">';
        html+='<div class="inline-block w19"><a style="color: #00a2d4" href="javascript:;" onclick="delSpecValue(this)">删除</a></div>';
        html+='</div>';
        html+='</div>';
        html+='</div>';
        $("#att").append(html);
    }
    //删除一条
    function delSpecValue(e) {
      $(e).parents('.w100').remove();
    }
    var flag = false;//防止重复提交
    function addGoodsAttribute() {
        var attr_name = $("#attr_name").val();
        var attr_id = $("#attr_id").val();
        var sort = $("#sort").val();
        var cate_id = $("#cate_id").val();
        if (attr_name == '') {
            $("#attr_name").focus();
            layer.msg('类型名称不能为空', {icon: 2, time: 1000});
            return false;
        }
        if ($("#is_visible").prop("checked")) {
            var is_visible = 1;
        } else {
            var is_visible = 0;
        }
        var attr_value_obj = $("input[name='attr_value']");
        var attr_value_str = '';
        attr_value_obj.each(function(i){
            if(attr_value_obj.eq(i).val() != ''){
                attr_value_str += ',' + attr_value_obj.eq(i).val();
            }
        });
        attr_value_str = attr_value_str.substr(1);
        if(attr_value_str == ''){
            layer.msg('属性值不能为空', {icon: 2, time: 1000});
            return false;
        }
        if (flag) {
            return;
        }
        flag = true;
        $.ajax({
            type: "post",
            url: "{:url('goods/goods_attr_edit')}",
            data: {
                'attr_id': attr_id,
                'attr_name': attr_name,
                'sort': sort,
                'is_visible': is_visible,
                'attr_value_str': attr_value_str,
                'cate_id':cate_id
            },
            success: function (data) {
                if (data["code"] > 0) {
                    layer.msg('修改成功!', {icon: 1, time: 1000}, function () {
                        window.parent.location.href = "{:url('goods/attributelist')}";
                    });
                } else {
                    layer.msg(data['message'], {icon: 5, time: 1000});
                    flag = false;
                }
            }
        });
    }
</script>
</body>
</html>